@import '@/style/varible.less';
*{
    box-sizing: border-box;
}
html{
    height: 100%;
}
body{
    margin: 0;
    padding: 0;
    height: 100%;
    color: #0F1222;
    font-size: 14px;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: @blue-color;
}

ul{
    padding: 0;
    margin: 0;
    list-style: none;
}

#app{
    height: 100%;
}

.wd-table-operate-btns {
    display: flex;
    align-items: center;
    height: 100%;
    .btn-item {
        margin-right: 16px;
        cursor: pointer;
        color: @blue-color;
        &:last-of-type {
            margin-right: 0;
        }
        &.red {
            color: @red-color;
        }
        &.disabled{
            color: #B7B7BC;
            cursor: not-allowed;
        }
    }
    .fes-btn{
        margin-right: 8px;
    }
}

.wd-page{
    height: 100%;
    background: #f7f8fa;
    .wd-side-menus {
        flex: 0 0 220px;
    }
}
// 有些样式需要抽离出来
.project-tags{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: -8px;
    .tags-item{
        padding: 0 6px;
        margin-right: 8px;
        margin-bottom: 8px;
        height: 24px;
        line-height: 22px;
        font-size: 12px;
        color: #000;
        background: #F7F7F8;
        border: 1px solid #CFD0D3;
        border-radius: 2px;
    }
}
.wd-content{
    flex: 1;
    padding: 16px 16px 32px;
    overflow-y: auto;
    .wd-content-title{
        margin-bottom: 16px;
        font-size: 24px;
        line-height: 32px;
    }
    .wd-content-body{
        position: relative;
        padding: 24px;
        margin-bottom: 16px;
        background: #FFFFFF;
        border-radius: 4px;
        .wd-body-title{
            margin-bottom: 24px;
            font-size: 16px;
            line-height: 24px;
            color: #0F1222;
            .upstream-switch{
                margin-left: 222px;
                font-size: 14px;
                font-weight: normal;
                color: #646670;
            }
        }
        .wd-table-list{
            .wd-table-row{
                display: flex;
                margin-bottom: 16px;
                font-weight: 400;
                .wd-table-header{
                    width: 72px;
                    color: #646670;
                }
                .wd-table-detail{
                    .wd-table-input{
                        width: 300px;
                    }
                }
            }
        }
        .wd-body-menus{
            position: absolute;
            display: flex;
            top: 24px;
            right: 24px;
            z-index: 10;
            .wd-body-menu-item{
                display: flex;
                align-items: center;
                color: @blue-color;
                line-height: 22px;
                padding-left: 16px;
                cursor: pointer;
                user-select: none;
                &::after{
                    content: '';
                    display: block;
                    margin-left: 16px;
                    width: 1px;
                    height: 14px;
                    background: #CFD0D3;
                }
                &:last-child{
                    &::after{
                        display: none;
                    }
                }
            }
        }
    }
    .wd-project-header {
        display: flex;
        align-items: center;
        padding-bottom: 16px;
        .back, .edit {
            color: #93949B;
            height: 24px;
            width: 24px;
            transform: scale(1.8);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .name-ctn{
            // flex: 1;
            // //通过设置宽度为0让整个name容器的宽度由flex自己分配控制
            // width: 0;
            min-width: 0;
        }
        .name {
            font-size: 24px;
            color: #0F1222;
            margin: 0 12px;
            // width: 600px;
        }
    }
}

.rule-detail-form{
    margin-bottom: 24px;
    .form-edit-input{
        display: none;
    }
    .fes-select,
    .fes-input,
    .fes-textarea{
        max-width: 290px;
    }
    .fes-form .fes-form-item.is-required .fes-form-item-label::before{
        display: none;
    }
    .fes-tabs {
        &.validation-tabs {
            position: relative;
            padding-top: 31px;
            flex: 1 1 100%;
            .fes-tabs-nav {
                position: absolute;
                top: 0;
                width: 100%;
                .fes-tabs-tab {
                    border: 1px solid #CFD0D3;
                    background-color: rgba(15, 18, 34, 0.03);
                    &.fes-tabs-tab-active {
                        margin-bottom: 0;
                        border-bottom: 1px solid #FFF;
                        background-color: #FFF;
                        .fes-tabs-tab-label {
                            color: #5384FF;
                        }
                    }
                }
                .fes-tabs-tab-pad {
                    min-width: 8px;
                    background-color: #CFD0D3;
                    border: none;
                }
                .fes-tabs-nav-suffix {
                    position: relative;
                    padding: 0 0 0 8px;
                    border: none;
                    .fes-btn {
                        margin-bottom: 0;
                        height: 32px;
                        color:#0F1222;
                        background-color: rgba(15, 18, 34, 0.03);
                        border: 1px solid #CFD0D3;
                        border-bottom: none;
                        border-radius: 4px 4px 0 0;
                    }
                }
            }
            .fes-tabs-tab-pane-wrapper {
                padding: 16px;
                border: 1px solid #CFD0D3;
                border-radius: 0 4px 4px 4px;
            }
        }
    }
    .rule-sql-preview{
        width: 100%;
        min-height: 30px;
        padding: 8px 16px;
        background: rgba(15,18,34,0.03);
        border-radius: 4px;
        line-height: 24px;
    }
    .fes-form .fes-form-item{
        margin-bottom: 16px;
    }
    .rule-config-preview{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 16px;
        .rule-form-config{
            min-width: 400px;
            padding: 16px 0 0 16px;
            background: rgba(15,18,34,0.03);
            border-radius: 4px;
            .hint {
                position: absolute;
                top: 50%;
                right: 10px;
                margin-top: -7px;
                color: #646670;
            }
            &:last-child{
                margin-right: 0;
            }
            &.edit{
                background: transparent;
                padding: 16px 26px 0 16px;
                border: 1px solid #eee;
                .hint {
                    right: -20px;
                }
            }
        }
    }
    .form-preview-label{
        word-break: break-word;
        &.inline{
            display: inline;
        }
    }
    .rule-detail-sub-form{
        padding: 8px;
        background: rgba(15, 18, 34, 0.03);
        border-radius: 4px;
        margin-bottom: 16px;
        &:last-of-type{
            margin-bottom: 0;
        }
        .fes-form-item{
            &:last-child{
                margin-bottom: 0;
            }
        }
    }
    .fes-form-item-label,
    .input-preview-label{
        color: #646670;
    }
    // 预览的时候不能显示错误信息
    .fes-form-item-error{
        display: none;
    }
    &.edit{
        .fes-form-item-error{
            display: block;
        }
        .rule-detail-sub-form{
            padding: 0;
            background: none;
        }
        .form-preview-label{
            display: none;
        }
        .form-edit-input{
            display: flex;
            &.full{
                width: 100%;
            }
        }
        .fes-form .fes-form-item.is-required .fes-form-item-label::before{
            display: inline-block;
        }
        .fes-form .fes-form-item{
            margin-bottom: 22px;
        }
    }
}

.rule-form-table{
    flex: 1;
    flex-wrap: wrap;
    color: #0F1222;
    .form-table{
        width: 100%;
        border: 0;
        border-collapse: collapse;
        margin-bottom: 16px;
        .table-header > th,
        .table-row > td {
            padding: 16px;
            line-height: 22px;
            &:nth-child(1),
            &:nth-child(2){
                width: 40%
            }
            &:last-child{
                width: 20%;
            }
        }
        .table-header{
            text-align: center;
            background: #F7F7F8;
            >th{
                font-weight: normal;
            }
        }
        .table-row{
            border-bottom: 1px solid #F0F0F0;
            >td{
                text-align: center;
                .form-edit-input{
                    max-width: 100%;
                }
                .btn{
                    margin-right: 16px;
                    &:last-child{
                        margin-right: 0;;
                    }
                    &.del{
                        color: #F75F56;
                    }
                }
            }
        }
        &.cross-table{
            .table-header > th,
            .table-row > td {
                &:nth-child(1){
                    width: 30%
                }
                &:nth-child(2){
                    width: 20%
                }
                &:nth-child(3){
                    width: 30%
                }
            }
        }
    }
    .table-operation{
        width: 100%;
        text-align: center;
        &.empty{
            text-align: left;
        }
        &.cross-table{
            padding-bottom: 16px;
            border-bottom: 1px solid #F0F0F0;
        }
    }
}

.table-pagination-container {
    padding-top: 16px;
    .fes-pagination {
        display: flex;
        justify-content: flex-end;
    }
}

.btn-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.fes-spin {
    &[fixed] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.btn-list {
    display: flex;
    align-items: center;
    & > .btn-item {
        margin-right: 16px;
        &:last-of-type {
            margin-right: 0;
        }
    }
}

.my-project {
    .my-project-header {
        margin-bottom: 8px;
    }
}

.table-container {
    margin-top: 24px;
    .btn-delete {
        color: @red-color;
    }
}

.page-header-condition{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--f-border-color-split);
    .condition-item{
        align-items: center;
        padding-right: 22px;
        padding-bottom: 24px;
        &:last-child{
            padding-right: 0;
        }
        &.white {
            color: #FFFFFF;
        }
        .condition-label{
            padding-right: 16px;
            font-size: 14px;
            color: #0F1222;
        }
        .condition-value{
            margin-right: 16px;
        }
        .fes-input,
        .fes-select {
            width: 160px;
        }
    }
    .selected-count {
        background: rgba(83,132,255,0.06);
        border: 1px solid #5384FF;
        color: #5384FF;
    }
}

// .loading-block{
//     width: 100%;
//     height: 400px;
//     background: url('@/assets/images/icons/loading.gif') center no-repeat;
// }


// .empty-block{
//     .empty-data{
//         width: 100%;
//         height: 200px;
//         margin-top: 150px;
//         background: url('@/assets/images/emptyData.svg') center no-repeat;
//     }
//     .table-empty-tips{
//         margin-top: 23px;
//         margin-bottom: 155px;
//         height: 26px;
//         font-size: 18px;
//         color: #93949B;
//         text-align: center;
//         line-height: 26px;
//     }
    
//     .empty-query-result{
//         width: 100%;
//         height: 200px;
//         margin-top: 150px;
//         background: url('@/assets/images/emptyQueryResult.svg') center no-repeat;
//     }
// }

.long-string-label {
    display: -webkit-box;
    overflow : hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    &.single{
        -webkit-line-clamp: 1;
        white-space: normal;
    }
}
.long-string-content {
    max-width: 360px;
    word-break: break-all;
}
.index-detail-form .fes-form-item{
    margin-bottom: 8px;
}
.index-detail-form .fes-form-item-content{
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color:#0f1222;
}
.a-link{
    cursor: pointer;
}
.fes-popper {
    .a-link {
        color: var(--f-white);
    }
}
.fes-tooltip-text {
    max-width: 100vw;
    word-break: break-all;
}
.fes-ellipsis {
    .a-link {
        color: @blue-color;
    }
}
.project-template-style {
    padding-top: 0;
    margin-right: -24px;
    margin-left: -24px;
    :deep(.card) {
        &.isEmbed{
            margin: 16px 8px;
        }
    }
}
.execution-parameters-style{
    .fes-modal-header {
        font-weight: 700;
    }
}

// 解决弹窗中英文字符连续过长时不会换行导致内容溢出弹窗的问题
.fes-modal-body{
    word-break: break-all;
}

// 删除按钮样式
.del-btn {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #93949B;
    letter-spacing: 0;
    line-height: 22px;
    font-weight: 400;
    display: flex;
    align-items: center;
    margin-right: 16px;
    justify-content: space-between;
    cursor: pointer;
    width: 50px;
    .del-text {
        display: inline-block;
    }
}

// 在button中使用fes-icon时样式
.button-icon{
    margin-right: 4px; height: 14px; width:14px;
}

// 表单label右对齐时文字右对齐
.fes-form-item-right .fes-form-item-label {
    text-align: right;
}